<!DOCTYPE html>
<html leng="en">
<head>
<meta charset="UTF-8">
  <title>Coordinate Mapping Example</title>
</head>
<body>
<!-- 两个图片元素 -->
<img id="image1" src="/Users/w/Desktop/small.png" width="460" height="256">
<img id="image2" src="/Users/w/Desktop/big.png" width="3268" height="1480">

<script>
  // 假设这些是460x256分辨率图片上的坐标
  const coordinatesImage1 = [
    { x: 100, y: 50 },
    { x: 200, y: 150 },
    // ... 添加更多的坐标点
  ];

  // 获取图片元素
  const image1 = document.getElementById('image1');
  const image2 = document.getElementById('image2');

  // 原始图片的尺寸
  const width1 = image1.width;
  const height1 = image1.height;

  // 目标图片的尺寸
  const width2 = image2.width;
  const height2 = image2.height;

  // 计算比例因子
  const scaleX = width2 / width1;
  const scaleY = height2 / height1;

  // 映射坐标到目标图片的位置
  const coordinatesImage2 = coordinatesImage1.map(coord => ({
    x: coord.x * scaleX,
    y: coord.y * scaleY,
  }));

  // 输出映射后的坐标
  console.log('Coordinates in 460x256 Image:', coordinatesImage1);
  console.log('Coordinates in 3268x1480 Image:', coordinatesImage2);
</script>
</body>
</html>

